<template>
  <div class="chart4">
    <!-- <div class="chart4-header">
      <div>年：<el-date-picker size="small" v-model="searchYear" value-format="yyyy" type="year" placeholder="选择年份" />
      </div>
    </div> -->
    <div class="card-container">
      <el-card class="data-card" shadow="hover">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-document-checked"></i>
          </div>
          <div class="card-info">
            <div class="card-title">新鉴定</div>
            <div class="card-value">{{ formatNumber(cardData[1]) }}<span class="unit">{{ unit }}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-refresh"></i>
          </div>
          <div class="card-info">
            <div class="card-title">重新鉴定</div>
            <div class="card-value">{{ formatNumber(cardData[2]) }}<span class="unit">{{ unit }}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-box"></i>
          </div>
          <div class="card-info">
            <div class="card-title">重新封壳</div>
            <div class="card-value">{{ formatNumber(cardData[3]) }}<span class="unit">{{ unit }}</span></div>
          </div>
        </div>
      </el-card>
      <el-card class="data-card" shadow="hover">
        <div class="card-content">
          <div class="card-icon">
            <i class="el-icon-scissors"></i>
          </div>
          <div class="card-info">
            <div class="card-title">拆壳</div>
            <div class="card-value">{{ formatNumber(cardData.removeBoxAmount) }}<span class="unit">{{ unit }}</span>
            </div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script>
import { bussinessBingtu } from '@/api/system/order'

export default {
  data() {
    return {
      // searchYear: '',
      unit: '日元',
      cardData: {
      }
    }
  },
  props: {
    searchYear: {
      type: Number,
      default: ''
    }
  },
  watch: {
    searchYear: {
      handler(newVal) {
        this.init()
      },
      immediate: true
    },
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      bussinessBingtu({ searchYear: this.searchYear }).then(res => {
        this.cardData = res.data.jianding
      })
    },
    formatNumber(num) {
      return num?.toLocaleString() || '0'
    }
  }
}
</script>

<style lang="scss" scoped>
.chart4 {
  width: 100%;

  .chart4-header {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    margin-bottom: 10px;
  }

  .card-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding: 0px;
  }

  .data-card {
    border-radius: 8px;
    transition: transform 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .card-content {
      display: flex;
      align-items: center;
      padding: 6px;
    }

    .card-icon {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 16px;

      i {
        font-size: 24px;
        color: #fff;
      }
    }

    .card-info {
      flex: 1;
    }

    .card-title {
      font-size: 16px;
      color: #606266;
      margin-bottom: 8px;
    }

    .card-value {
      font-size: 28px;
      font-weight: bold;
      color: #303133;
      line-height: 1.2;

      .unit {
        font-size: 14px;
        margin-left: 2px;
        font-weight: normal;
      }
    }

    &:nth-child(1) {
      .card-icon {
        background-color: #409EFF;
      }

      :deep(.el-card__body) {
        background: linear-gradient(135deg, rgba(64, 158, 255, 0.1) 0%, rgba(64, 158, 255, 0.05) 100%);
      }
    }

    &:nth-child(2) {
      .card-icon {
        background-color: #67C23A;
      }

      :deep(.el-card__body) {
        background: linear-gradient(135deg, rgba(103, 194, 58, 0.1) 0%, rgba(103, 194, 58, 0.05) 100%);
      }
    }

    &:nth-child(3) {
      .card-icon {
        background-color: #E6A23C;
      }

      :deep(.el-card__body) {
        background: linear-gradient(135deg, rgba(230, 162, 60, 0.1) 0%, rgba(230, 162, 60, 0.05) 100%);
      }
    }

    &:nth-child(4) {
      .card-icon {
        background-color: #F56C6C;
      }

      :deep(.el-card__body) {
        background: linear-gradient(135deg, rgba(245, 108, 108, 0.1) 0%, rgba(245, 108, 108, 0.05) 100%);
      }
    }
  }
}
</style>
